<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>个人中心</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css" />
      <link rel="stylesheet" type="text/css" href="../../css/common.css" />
      <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    	<link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
      <style>
          html, body {width: 100%;min-height: 100%;background: #F3EFEE;}
          .aui-active .aui-bar-tab-label{
            color: #f5a51c
          }
          .login {height:240px;background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);/*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/position: relative;}
      	.login .personal_logo {width: 4rem;height: 4rem;border-radius: 50%;margin: 0 auto 9px;/*position: absolute; top: 60px; left: 20px;*/}
      		.login .userinfo {position: absolute; top: 60px;text-align: center; left: 0; right: 0;}
      		.login .userinfo .title {font-size: 0.8rem; color: #fff;}

      		/* 设置条目 */
      		.item {height: 3rem;line-height: 3rem;padding-left: 0.7rem;background-color: #fff;}
      		.item_ico {float: left;width: 2.3rem;padding: 0.7rem 0.7rem 0.7rem 0;}
      		.item_arrow {float: right;width: 1.5rem;padding: 1rem 0.7rem 1rem 0;}
      		.item span {font-size: 0.7rem;}
          [v-cloak] {
              display: none;
          }
          .aui_list{
              background-image: linear-gradient(0,#eee,#eee 50%,transparent 50%);
          }
          .aui-list-item{
              background-image:linear-gradient(0,#eee,#eee 50%,transparent 50%) !important;
          }
          .aui-radio:checked{
            background: #f23030;
            border-color: #f23030;
            width: 0.8rem;
            height: 0.8rem;
            position: relative;
            top: 0.25rem;
            margin-right: 0.5rem;
          }
          .aui-toast-content{
            color: #fff;
          }
          [v-cloak]{
            display: none;
          }
          .textStyle{
            color: #999
          }
          .applyBtn{
            width:79vw;
            height:2.3rem;
            color:#fff;
            text-align:center;
            line-height:2.3rem;
            background:#f23030;
            margin:0 auto;
            border-radius: 1.5rem;
          }
          .cardImg{
            width: 97%;
            height:97%
          }
          .cardText{
            font-size: 0.6rem;
            color: #999;
            margin-top: 0.2rem;
          }
          .imgDiv{
            border: 1px solid #eee;
            padding: 0.5rem;
            width: 40vw;
            height: 5rem;
          }
          .cardContent{
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-top: 0.2rem;
            padding:0.5rem 0 0.5rem 0;
          }
          .aui-toast-content{
            color: #fff;
          }
      </style>
  </head>
  <body>
<div id="app" style="overflow-x:hidden">

<div class="user_nav_line"></div>
  <div class="aui-refresh-content">
    <ul class="aui-list aui-form-list">
      <li class="aui-list-item">
          <div class="aui-list-item-inner">
              <div class="aui-list-item-label" style="width: 29%;">
                  圈主姓名
              </div>
              <div class="aui-list-item-input">
                  <input type="text" placeholder="请填写合作方名称" style="font-size: 0.7rem;" v-model="userName">
              </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label" style="width: 29%;">
                    联系方式
                </div>
                <div class="aui-list-item-input">
                    <input type="text" placeholder="请填写联系方式" style="font-size: 0.7rem;" v-model="userPhone">
                </div>
              </div>
          </li>
          <li><div class="user_nav_line"></div></li>
          <li class="aui-list-item applyTopMargin">
              <div class="aui-list-item-inner">
                  <div class="aui-list-item-label" style="width: 29%;">
                      商圈名称
                  </div>
                  <div class="aui-list-item-input">
                      <input type="text" placeholder="不超过10个字" maxlength="10" style="font-size: 0.7rem;"  v-model="storeName">
                  </div>
                </div>
          </li>
          <li class="aui-list-item">
           <div class="aui-list-item-inner">
               <div class="aui-list-item-title aui-font-size-14">商圈介绍</div>
               <div class="aui-list-item-right" style="margin-right:0.75rem">{{num}}/100</div>
           </div>
          </li>
          <li>
              <textarea placeholder="请简单的介绍一下您的商圈吧~" maxlength="100" placeholder-class="textStyle" style="font-size: 0.7rem;padding-left:0.75rem;padding-right:0.75rem;height:7rem;" v-model="storeAbout"></textarea>
          </li>
          <li><div class="user_nav_line"></div></li>
          <li class="aui-list-item applyTopMargin">
              <div class="aui-list-item-inner">
                  <div class="aui-list-item-label" style="width: 29%;">
                      身份证号
                  </div>
                  <div class="aui-list-item-input">
                      <input type="text" placeholder="请填写身份证号" style="font-size: 0.7rem;" v-model="userCard">
                  </div>
                </div>
          </li>
          <li class="aui-list-item">
           <div class="aui-list-item-inner">
               <div class="aui-list-item-title aui-font-size-14">请上传身份证照片</div>
           </div>
          </li>
          <li class="cardContent">
            <div style="margin-right:0.5rem;margin-left:0.5rem;text-align:center" @click="tast('1')">
              <div class="imgDiv">
                <img :src=userImg[0]  class="cardImg"/>
              </div>
              <div class="cardText">请上传身份证正面照片</div>
            </div>
            <div style="margin-right:0.5rem;text-align:center" @click="tast('2')">
              <div class="imgDiv">
                 <img :src=userImg[1] class="cardImg" />
              </div>
              <div class="cardText">请上传身份证反面照片</div>
            </div>
          </li>
          <li><div class="user_nav_line"></div></li>

          <li class="aui-list-item">
           <div class="aui-list-item-inner  aui-list-item-arrow">
               <div class="aui-list-item-title aui-font-size-14">商圈区域</div>
               <div class="aui-list-item-right" style="margin-right:1.1rem" @click="addAbout">{{usercity}}</div>
           </div>
          </li>

          <li class="aui-list-item">
           <div class="aui-list-item-inner">
               <div class="aui-list-item-title aui-font-size-14">个人资历</div>
               <div class="aui-list-item-right" style="margin-right:0.75rem">{{personNum}}/100</div>
           </div>
          </li>
          <li>
              <textarea placeholder="请简单的介绍一下自己吧~" maxlength="100" placeholder-class="textStyle" style="padding-left:0.75rem;padding-right:0.75rem;height:7rem;font-size: 0.7rem;" v-model="userAbout"></textarea>
          </li>
       <li style="background: #F3EFEE;padding-top:1.5rem;padding-bottom:1.5rem;"> <div class="applyBtn" @click="storeCreate">提交申请</div></li>
    </ul>


  </div>

<div>
<!--弹框-->

</div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/zepto.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/utils.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript" src="../../script/aui-popup.js"></script>
  <script type="text/javascript" src="../../script/aui-dialog.js"></script>
  <script type="text/javascript" src="../../script/aui-toast.js"></script>
  <script type="text/javascript" src="../../script/address_data.js"></script>
  <script type="text/javascript">

      var popup = new auiPopup();
         function showPopup(){
             popup.show(document.getElementById("top-right"))
         }
  </script>
  <script>
  apiready = function(){
     var toast = new auiToast({});
     var vm = new Vue({
        el:'#app',
        data:{
            userProvince:'',
            userMaincity:'',
            userCounty:'',
            userImg:['../../image/my/cardReverce.png','../../image/my/cardPositive.png'],
            userName:'',
            userPhone:'',
            storeName:'',
            storeAbout:'',
            userCard:'',
            userAbout:'',
            num:'0',
            personNum:'0',
            usercity:'请选择',

        },
        methods:{
          //验证身份证
          isCardNo:function(card) {
               var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
               if(reg.test(card) === false)
               {
               toast.fail({
                 title:"身份证输入不合法",
                 duration:1000
               })
               return;
               }
           },
          //提交店铺申请
          storeCreate:function(){
            var _this = this;

           if(_this.userName == ""){
             toast.fail({
                   title:"请填写姓名",
                   duration:1000
               });
               return;
           }
           if(_this.userPhone == ""){
             toast.fail({
                   title:"请填写手机号",
                   duration:1000
               });
               return;
           }else if(!checkMobile(_this.userPhone)){
                   toast.fail({
                     title:"手机号错误",
                     duration:2000
                   });
                   return;
            }

           if(_this.userCard == ""){
             toast.fail({
                   title:"请填写身份证号",
                   duration:1000
               });
               return;
           }else{
             _this.isCardNo(_this.userCard);
           }
           if(_this.userProvince == ""){
             toast.fail({
                   title:"请选择地区",
                   duration:1000
               });
               return;
           }



           api.showProgress({
               style: 'default',
               animationType: 'fade',
               title: '努力加载中...',
               text: '先喝杯茶...',
               modal: false
           });


            api.ajax({
                url: window.Url.Freestore_circle,
                method: 'post',
                data: {
                    values: {
                        token:$api.getStorage('token'),
                        realname:_this.userName,
                        mobile:Base64.encode('UNO' + _this.userPhone + 'HACHA'),
                        name:_this.storeName,
                        title:_this.storeAbout,
                        cardId:Base64.encode('UNO' + _this.userCard + 'HACHA'),
                        province:_this.userProvince,
                        city:_this.userMaincity,
                        district:_this.userCounty,
                        longevity:_this.userAbout
                    },
                    files: {
                        card_pic:_this.userImg
                    }
                }
            },function(ret, err){
              //alert(JSON.stringify(ret));
              api.hideProgress();

                if (ret.re==1) {
                    toast.success({
                      title:ret.info,
                      duration:1000
                    })
                    setTimeout(function(){
                      api.closeToWin({
                          name: 'myBusinesscircle',
                      });
                      api.execScript({
                          name: 'myBusinesscircle',
                          script: 'window.location.reload()'
                      });
                    },1000)
                } else {
                    toast.fail({
                      title:ret.info,
                      duration:1000
                    })
                }
            });

          },
          //详细地址
          addAbout:function(){
            var _this = this;
            var UIActionSelector = api.require('UIActionSelector');
            UIActionSelector.open({
                datas: address_data,
                layout: {
                    row: 5,
                    col: 3,
                    height: 60,
                    size: 12,
                    sizeActive: 14,
                    rowSpacing: 5,
                    colSpacing: 10,
                    maskBg: 'rgba(0,0,0,0.2)',
                    bg: '#fff',
                    color: '#888',
                    colorActive: '#f00',
                    colorSelected: '#f00'
                },
                animation: true,
                cancel: {
                    text: '取消',
                    size: 12,
                    w: 90,
                    h: 35,
                    bg: '#fff',
                    bgActive: '#ccc',
                    color: '#888',
                    colorActive: '#fff'
                },
                ok: {
                    text: '确定',
                    size: 12,
                    w: 90,
                    h: 35,
                    bg: '#fff',
                    bgActive: '#ccc',
                    color: '#888',
                    colorActive: '#fff'
                },
                title: {
                    text: '请选择',
                    size: 12,
                    h: 44,
                    bg: '#eee',
                    color: '#888'
                },
                fixedOn: api.frameName
            }, function(ret, err) {
                if (ret.eventType == "ok") {
                    _this.usercity = ''
                    // for(var i in ret.selectedInfo) { _this.usercity += ret.selectedInfo[i].name }
                    _this.usercity += _this.userProvince = ret.level1;
                    _this.usercity += _this.userMaincity = ret.level2 || ' ';
                    _this.usercity += _this.userCounty = ret.level3 || ' ';
                }
            });
          },
          //刷新
          setRefresh:function() {
                var pullRefresh = new auiPullToRefresh({
                    container: document.querySelector('.aui-refresh-content'),
                    triggerDistance: 100
                }, function(ret) {

                    if (ret.status == "success") {
                        setTimeout(function() {
                            pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                        }, 1500)
                    }
                })
            },
            //上传身份证照片
            tast:function(type){
               _this = this;
              api.actionSheet({
                  title: '上传身份证照片',
                  cancelTitle: '取消',
                  buttons: ['图片','拍照']
              }, function(ret, err) {

                      if (ret.buttonIndex==2) {
                         _this.personImg('camera',type)
                      }else if(ret.buttonIndex==1){
                        _this.personImg('library',type)
                      }

              });
            },
            personImg:function(type,index){
              var _this = this;
             api.getPicture({
                 sourceType: type,
                 encodingType: 'jpg',
                 mediaValue: 'pic',
                 destinationType: 'url',
                 allowEdit: true,
                 quality: 100,
                //  targetWidth: 100,
                //  targetHeight: 100,
                 saveToPhotoAlbum: false
             }, function(ret, err){
                 if(ret){
                    //  console.log(JSON.stringify(ret));

                    if(ret.data!='' && index==1){
                       Vue.set(vm.userImg,0,ret.data)
                    }else if(ret.data!='' && index==2){
                       Vue.set(vm.userImg,1,ret.data)
                    }
                  }

             });

           },
        },
        mounted:function(){
          this.setRefresh();

        },
        watch:{
          storeAbout:function(val){
            if(val.length!=101) this.num=val.length;
          },
          userAbout:function(val){
              if(val.length!=101) this.personNum=val.length;
          }
        }
      })
  };

  </script>
  </html>
